<template>
  <div class="tourist">
    <div class="top">
      <span style="color: aliceblue;font-weight: 700;font-size: 20px;">年度游客量对比</span>
      <div class="logo"></div>
    </div>


    <div class="charts" ref="charts"></div>
  </div>
</template>
<script setup name='sex'>
  import { ref, onMounted } from 'vue'
  //echarts插件引入
  import * as echarts from 'echarts'
  //水球图拓展插件
  import 'echarts-liquidfill'
  let people = ref('20008123人')
  //水球图的实例
  let charts = ref()
  onMounted(() => {
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
      grid:{bottom:20,
      top:20,left:0,right:0},
      xAxis: {
        show: true,
        data: [0, 1, 2,3,4,5,6,7,8,9,10,11],

        type: 'category'
      },

      yAxis: {
        show: false,

      },
      series: [
        {

          type: 'scatter',
          symbol: 'diamond',
          label: {
            show: true,
            position: 'top'
          },
          data: [10.0, 8.04,8.07, 6.95,13.0, 7.58,9.05, 8.81,11.0, 8.33,14.0, 7.66],
          
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'red' // 0% 处的颜色
              }, {
                offset: 1, color: 'blue' // 100% 处的颜色
              }],
              global: false // 缺省为 false} }
            }
          }

        }]
    })
  })
</script>
<style scoped lang='scss'>
  .tourist {
    margin: 10px 0 20px 30px;
    position: relative;
    background: url('@/views/screen/images/dataScreen-main-lt.png') no-repeat;
    background-size: cover;

    .top {
      .logo {

        display: block;
        margin-top: 10px;
        width: 68px;
        height: 7px;
        background: url('@/views/screen/images/dataScreen-title.png') no-repeat;

      }


    }

    .center {
      margin-top: 40px;
      display: flex;

      justify-content: center;

      .left {
        margin: 20px;
        width: 111px;
        height: 115px;
        background: url('@/views/screen/images/man-bg.png') no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .right {
        margin: 20px;
        width: 111px;
        height: 115px;
        background: url('@/views/screen/images/woman-bg.png') no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .bottom {
      padding: 0 114px;
      display: flex;
      justify-content: space-between;
      color: 'white'
    }


  }

  .charts {
    width: 100%;
    height: 210px;
  }
</style>